/**
 * 滚动插件
 * @since 1.0 2014-10-6 by sutroon
 * @example
 *  <div class="notices-panel"><p>这里是滚动的图片或文字</p><p>这里是滚动的图片或文字</p><p>这里是滚动的图片或文字</p><p>这里是滚动的图片或文字</p><p>这里是滚动的图片或文字</p></div>
 *  $('.notices-panel').marqueeLeft({speed: 40, width: '600px', hide: true});
 *  .notices-panel { color: #FFF; margin: 5px 0px 0px 25px; }
.notices-panel table, .notices-panel td, .notices-panel th { border: none; padding: 0px; margin: 0px; white-space: nowrap; }
.notices-panel td { padding: 0px 10px; }
.notices-panel a { color: #FFF; }
 */
(function ($) {
    $.fn.marqueeLeft = function (options) {
        var opts = $.extend({}, {speed: 30, width: '410px', height: '16px', splitor: 'p', hide: false}, options);
        return this.each(function () {
            var $this = $(this);
            if (opts.hide) {
                $this.hide();
            } else {
                $this.find(opts.splitor).wrap('<td></td>');
                $this.wrapInner('<table cellpadding="2" cellspacing="0" border="0"><tr align="center"></tr></table>');
                $this.css({'overflow': 'hidden', 'height': opts.height, 'width': opts.width, 'white-space': 'nowrap'});
                var contents = $this.html();
                $this.html('<table cellpadding="0" cellspacing="0" border="0"><tr><td class="mqtd_col1" valign="top" align="center">' + contents + '</div> </td><td class="mqtd_col2" valign="top"></td></tr></table>');
                var col2 = $this.find('.mqtd_col2')[0];
                var col1 = $this.find(".mqtd_col1")[0];
                var col = $this[0];
                col2.innerHTML = col1.innerHTML; //克隆colee1为colee2
                var diff=0;
                function Marquee() {
                    if (col2.offsetWidth - col.scrollLeft <= 0)//offsetWidth 是对象的可见宽度
                        col.scrollLeft -= col1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
                    else {
                        diff=col.scrollLeft;
                        col.scrollLeft++
                        if(diff==col.scrollLeft){
                            col.scrollLeft -= col1.offsetWidth;
                        }
                    }
                }

                var MyMar = setInterval(Marquee, opts.speed);
                col.onmouseover = function () {
                    clearInterval(MyMar)
                }
                col.onmouseout = function () {
                    MyMar = setInterval(Marquee, opts.speed)
                }
            }
        })
    };
})(jQuery);